<template>
  <div class="index-box">
    <div class="login-box">
      <div class="login-header">
        <h4>后台管理系统</h4>
      </div>
      <div class="login">
        <div class="title">
          <h4>账号密码登录</h4>
        </div>
        <div class="login-form">
          <a-form-model
              class="login-a-form"
              :model="formInline"
              @submit="handleSubmit"
              @submit.native.prevent>
            <a-form-model-item>
              <a-input v-model="formInline.user" placeholder="账户" size="large">
                <a-icon slot="prefix" type="user" style="color:rgba(76,131,252,.9)" />
              </a-input>
            </a-form-model-item>
            <a-form-model-item>
              <a-input v-model="formInline.password" type="password" placeholder="密码" size="large">
                <a-icon slot="prefix" type="lock" style="color:rgba(76,131,252,.9)" />
              </a-input>
            </a-form-model-item>
            <a-form-model-item>
              <a-input
                  style="width: 170px"
                  v-model="formInline.captchaCode"
                  type="password"
                  placeholder="验证码"
                  size="large">
                <a-icon slot="prefix" type="lock" style="color:rgba(0,0,0,.25)" />
              </a-input>
              <img src="https://img2.baidu.com/it/u=2859753920,13388660&fm=26&fmt=auto" alt="" style="height: 100%;width: calc(100% - 170px);">
            </a-form-model-item>
            <a-form-model-item>
              <a-button type="primary" block @click="goToMain()">
                提交
              </a-button>
            </a-form-model-item>
          </a-form-model>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "login",
  data() {
    return {
      formInline: {
        user: '',
        password: '',
        captchaCode:''
      },
    };
  },
  methods: {
    handleSubmit(e) {
      console.log(this.formInline);
    },
    goToMain(){
      this.$router.push('/main');
    }
  },
}
</script>

<style lang="less" scoped>
.index-box {
  width: 100%;
  height: 100%;
  background-size: cover;
  background: url(https://image.baidu.com/search/down?tn=download&word=download&ie=utf8&fr=detail&url=https%3A%2F%2Fgimg2.baidu.com%2Fimage_search%2Fsrc%3Dhttp%253A%252F%252Fpic.vjshi.com%252F2018-12-25%252Fd6c18e28d60ae824cb34cd564e1d523e%252F00003.jpg%253Fx-oss-process%253Dstyle%252Fwatermark%26refer%3Dhttp%253A%252F%252Fpic.vjshi.com%26app%3D2002%26size%3Df9999%2C10000%26q%3Da80%26n%3D0%26g%3D0n%26fmt%3Djpeg%3Fsec%3D1637995804%26t%3Db742e1244e1f742d875bcd35a117a648&thumburl=https%3A%2F%2Fimg0.baidu.com%2Fit%2Fu%3D2969009646%2C2769932778%26fm%3D26%26fmt%3Dauto);
  position: relative;
  .login-box {
    position: absolute;
    top: 50%;
    left: 75%;
    transform: translate(-50%,-50%);

    .login-header {
      height: 140px;
      line-height: 140px;
      h4 {
        text-align: center;
        color: aliceblue;
        font-size: 20px;
      }
    }
    .login {
      width: 500px;
      background: rgba(255,255,255,.5);
      height: 500px;
      padding: 50px 70px;
      border-radius: 5px;
      box-shadow: 0px 0px -1px rgba(81,130,252,.2);
      .title {
        margin-bottom: 30px;
        h4 {
          color: aliceblue;
          text-align: center;
          font-size: 18px;
        }
      }
    }
  }
}

@media screen and (max-width: 1000px) {
  .login-box {
    left: 50% !important;
  }
}
</style>